<!DOCTYPE html>
<html>
<head>
    {include file='public/meta'/}
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/Statistics.css"/>

    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/member/css/member-info.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/setcardlist.css"/>


    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/bootstrap-table/bootstrap-table.css"/>
    <script src="__STATIC_URL__/static/bootstrap-table/bootstrap-table.js"></script>
    <script src="__STATIC_URL__/static/bootstrap-table/bootstrap-table-zh-CN.js"></script>

</head>
<body>
{include file='public/header'/}
<section id="content">
    <!------------------导航-------------------------->
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content" style="background:none;">
        <div class="page-heading mgl15 mgr15">
            <ol class="breadcrumb">
                <li>当前位置是&nbsp;:</li>
                <li><a href="{:url('cardus/carduslist')}">会员卡管理</a></li>
                <li>
                    <a href="javascript:history.back();">会员卡统计</a>
                </li>
                <li class="active" style="color: #02b87f;"> 充值数据</li>
            </ol>
        </div>
        <div style="background:#fff;">
            <div class="row" style="    margin-bottom: 20px;">
                <div class="col-lg-12">
                    <ul class="nav nav-tabs tabs"  style="width: 100%;">
                        <li class="tab">
                            <a href="{:url('report/cardsurvey')}" >概览数据</a>
                        </li>
                        <li class="tab ">
                            <a href="{:url('report/reportcardmemberlist')}">消费数据</a>
                        </li>

                        <li class="tab active">
                            <a href="{:url('report/cardreglist')}" class="active">充值数据</a>
                        </li>
                        <li class="tab ">
                            <a href="{:url('report/cardbonuslist')}" >积分数据</a>
                        </li>
                        <li class="tab ">
                            <a href="{:url('report/carddellist')}">退卡数据</a>
                        </li>

                        <li class="tab"></li>
                    </ul>
                </div>
            </div>
            <div class="panel panel-default mgl15 mgr15">
                <div class="panel-heading">
                    <h5 class="panel-title">
                        充值分析

                    </h5>
                </div>
                <div class="panel-body">
                    <div class="fenxilist clearfix">

                        <div class="col-sm-3">
                            <div class="card-box widget-box-1 bg-white">
                                <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right" data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                </i>
                                <h4 class="text-dark">总金额(笔数)</h4>
                                <h2 class="text-pink text-center">

                                    ¥ <span>
                                 {:number_format($info['z_con_fee'],2)}
                                  </span>
                                </h2>
                                <h6 class="text-pink text-right">

                                <span>
                             {$info['con_order']}笔
                                  </span>
                                </h6>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="card-box widget-box-1 bg-white">
                                <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right" data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                </i>
                                <h4 class="text-dark">微信充值金额(笔数)</h4>
                                <h2 class="text-warning text-center">

                                    ¥ <span>
                                {:number_format($info['wx_con_fee'],2)}
                                  </span>
                                </h2>
                                <h6 class="text-warning text-right">

                                <span>
                            {$info['wx_con_order']}笔
                                  </span>
                                </h6>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="card-box widget-box-1 bg-white">
                                <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right" data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                </i>
                                <h4 class="text-dark">微信自助充值金额(笔数)</h4>
                                <h2 class="text-success text-center">

                                    ¥ <span>
                                {:number_format($info['wxonline_con_fee'],2)}
                                  </span>
                                </h2>
                                <h6 class="text-success text-right">

                                <span>
                            {$info['wxonline_con_order']}笔
                                  </span>
                                </h6>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="card-box widget-box-1 bg-white">
                                <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right" data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                </i>
                                <h4 class="text-dark">支付宝充值金额(笔数)</h4>
                                <h2 class="text-primary text-center">

                                    ¥ <span>
                                {:number_format($info['ali_con_fee'],2)}
                                  </span>
                                </h2>
                                <h6 class="text-primary text-right">

                                <span>
                           {$info['ali_con_order']}笔
                                  </span>
                                </h6>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="card-box widget-box-1 bg-white">
                                <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right" data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                </i>
                                <h4 class="text-dark">支付宝自助充值金额(笔数)</h4>
                                <h2 class="text-primary text-center">

                                    ¥ <span>
                                {:number_format($info['alionline_con_fee'],2)}
                                  </span>
                                </h2>
                                <h6 class="text-primary text-right">

                                <span>
                           {$info['alionline_con_order']}笔
                                  </span>
                                </h6>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="card-box widget-box-1 bg-white">
                                <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right" data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                </i>
                                <h4 class="text-dark">现金充值金额(笔数)</h4>
                                <h2 class="text-info text-center">

                                    ¥ <span>
                                 {:number_format($info['cash_con_fee'],2)}
                                  </span>
                                </h2>
                                <h6 class="text-info text-right">

                                <span>
                           {$info['cash_con_order']}笔
                                  </span>
                                </h6>
                            </div>
                        </div>




                        <div class="col-sm-3">
                            <div class="card-box widget-box-1 bg-white">
                                <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right" data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                </i>
                                <h4 class="text-dark">实充金额</h4>
                                <h2 class="text-info  text-center">
                                    ¥
                                    <span>
                                        {:number_format($info['con_fee'],2)}
                                    </span>
                                </h2>

                            </div>
                        </div>



                        <div class="col-sm-3">
                            <div class="card-box widget-box-1 bg-white">
                                <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right" data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                </i>
                                <h4 class="text-dark">赠送金额(元)</h4>
                                <h2 class="text-pink text-center">
                                    ¥
                                    <span>
                                  {$info['give_fee']}
                                  </span>
                                </h2>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="panel panel-default panel-search mgl15 mgr15">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-search pull-left" style="margin-right: 10px;"></span>筛选</h3>
                </div>
                <div class="panel-body form-horizontal table-search form-search">
                    <div class="col-sm-6 col-md-6 col-lg-4" id="machdiv">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">门店：</label>
                            <div class="col-sm-9">
                                <input type="hidden" name="type" id="type" value="search">

                                <input type="hidden" name="mchid" id="mach" value="">
                                <input class="form-control" id="mac" style=" display: inline-block;"
                                       value="全部门店"
                                       data-target="#myModal3" data-toggle="modal"/>

                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4 ">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">充值员：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" placeholder="请输入充值员" id="action_user" value="">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">会员卡号：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="code" placeholder="请输入会员卡号" value="">
                            </div>
                        </div>
                    </div>
                    <!--<div class="col-sm-6 col-md-6 col-lg-4">-->
                    <!--<div class="form-group">-->
                    <!--<label class="col-sm-3 control-label">充值方式：</label>-->
                    <!--<div class="col-sm-9">-->

                    <!--<select name="mid" class="form-control">-->
                    <!--<option>现金</option>-->
                    <!--<option>微信</option>-->
                    <!--<option>支付宝</option>-->
                    <!--</select>-->

                    <!--</div>-->
                    <!--</div>-->
                    <!--</div>-->
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">充值金额：</label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <input id="min_balance" type="text" value=""   placeholder="请输入" class="form-control">
                                    <div class="input-group-addon">至</div>
                                    <input id="max_balance" type="text" value="" class="form-control" placeholder="请输入">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">时间：</label>
                            <div class="col-sm-9">
                                <div class="">
                                    <input name="starttime" type="text" value=""  readonly="readonly" id="search_date" placeholder="请选择" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <a href="javascript:;" class="btn btn-primary" onclick="searchform()">查找</a>
                    <a href="javascript:;" class="btn btn-default" onclick="clearform()">清空</a>
                </div>
            </div>
            <div class="panel mgl15 mgr15">
                <div class="panel-heading addCharts" style="background:#ededed;">数据明细


                    <a href="javascript:;" onclick="load();" class="btn btn-info"
                       style="float: right;  margin-top: -7px;">点击下载</a>

                </div>
                <div class="panel-body">
                    <table class="table table-bordered table-striped" id="tablelist">

                    </table>
                </div>
            </div>

            {include file='public/footer'/}
        </div>
    </div>
</section>
{include file="public/machmodal" /}

</body>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel" style="font-size: 16px;">订单详情</h4>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <tbody id="templateHtml"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script src="__STATIC_URL__/static/js/template.js"></script>
<script src="__STATIC_URL__/static/laydate/laydate.js"></script>
<script src="/wntable.js?v=2"></script>
<script id="modallist" type="text/html">
    <tr>
        <td>消费门店：</td>
        <td>{{list.merchant}}</td>
    </tr>
    <tr>
        <td>订单号：</td>
        <td>{{list.orderid}}</td>
    </tr>
    <tr>
        <td>昵称：</td>
        <td>{{list.nickname}}</td>
    </tr>
    <tr>
        <td>卡号：</td>
        <td>{{list.code}}</td>
    </tr>
    <tr>
        <td>变动金额：</td>
        <td>{{list.num}}</td>
    </tr>
    <tr>
        <td>充值方式：</td>
        <td>
            {{list.pay_cate}}
        </td>
    </tr>
    <tr>
        <td>充值类型：</td>
        <td>
            {{list.cate}}
        </td>
    </tr>
    <tr>
        <td>变动渠道</td>
        <td>
            {{list.source}}
        </td>
    </tr>
    <tr>
        <td>充值时间：</td>
        <td>{{list.create_time}}</td>
    </tr>
    <tr>
        <td>操作人：</td>
        <td>{{list.action_user}}</td>
    </tr>
    <tr>
        <td>备注：</td>
        <td>{{list.remark}}</td>
    </tr>

</script>

<script type="text/javascript">
    $(function () {

        $("#myModal").on("show.bs.modal", function () {
            var id = $(event.target).data("id");
            var oid = $(event.target).data("oid");
            var datas = {};
            $.ajax({
                url: "{:url('CardApi/getrecorderinfo')}",
                type: "post",
                async: true,
                data: {
                    orderid: oid,
                    id:id
                },
                success: function (data) {
                    console.log(332,data);
                    datas.list = data;
                    var html = template('modallist', datas);
                    $("#templateHtml").html(html);
                }

            })
        });
        $("#myModal").on("show.bs.modal", function () {
            $("#templateHtml").html("");
        });
    })



</script>
<script>
    laydate.render({
        elem: '#search_date',
        type: 'datetime',
        range: true,
        ready: function(date){
            $(".layui-laydate-footer [lay-type='datetime'].laydate-btns-time").click();
            $(".laydate-main-list-1 .layui-laydate-content li ol li:last-child").click();
            $(".layui-laydate-footer [lay-type='date'].laydate-btns-time").click();

        },
        change: function(value, date,endDate){ //监听日期被切换

        }
    });
</script>

<script type="text/javascript">
    function searchform() {
        $("#tablelist" ).bootstrapTable('refresh');
    }
    $(function () {
        var type = "cardreglist";
        var url = "{:url()}";
        getcolumn(type, url, "tablelist")
    });
    function load() {
        $.ajax({
            url: "{:url()}",
            data: {
                type:"out_excel",
                mchid: $("#mach").val(),//后台请求传的查询参数
                search_date:$("#search_date").val(),
                action_user:$("#action_user").val(),
                min_balance:$("#min_balance").val(),
                max_balance:$("#max_balance").val(),
                code:$("#code").val(),
            },
            dataType: "json",
            async: false,
            type: "post",
            success: function (res) {
                console.log(res);
                window.location.href = res;
            }
        })


    }
    $(function () {

        $(".checkAll").click(function(){
            if(this.checked){
                $(".checkSingel").prop("checked",true);
            }else{
                $(".checkSingel").prop("checked",false);
            }

        });
    });
    //筛选条件
    function filtertj() {
        $("#payform").submit();
    };
    //筛选条件
    function cleartj() {
        $(".form-virtical input").val("");
        $("select").val("");
    };
</script>

</html>
